<template>
  <div @scroll="scrollGet" style="height: 100%">

    <img src="../public/background.jpg" class="main-img-bg">

    <div class="welcome-modular" v-if="iswelcomeModular">
      <p class="welcome-div-p-welcome">欢迎来到</p>
      <p><span class="welcome-div-span-name">晓山青</span><span class="welcome-div-span-shop">咖啡店</span></p>
      <p class="welcome-div-p-coffee">这里有测试咖啡1，测试咖啡2，测试咖啡3...</p>
      <button class="welcome-div-button">了解详情>></button>
    </div>

    <el-container>
      <el-header class="el-header-before" v-if="isTopSrcoll">
        <div class="header-div">
          <el-avatar :src="user_pic" icon="el-icon-user-solid" style="margin-left:20px;position:absolute;top: 20px;"></el-avatar>
          <el-link class="header-before-link">登录/注册</el-link>

          <el-link class="header-before-link">首页</el-link>
          <el-link class="header-before-link">今日推荐</el-link>
          <el-link class="header-before-link">精品分区</el-link>
          <el-link class="header-before-link">个人空间</el-link>

          <div class="header-input">
            <el-input v-model="input" placeholder="请输入内容" size="small" suffix-icon="el-icon-search" style="width: 200px;position: absolute;right: 50px;"></el-input>
          </div>
        </div>
      </el-header>

      <el-header class="el-header-after" v-else>
        <div class="header-div">
          <el-avatar :src="user_pic" icon="el-icon-user-solid" v-if="isTopSrcoll" style="margin-left:20px;position:absolute;top: 20px;"></el-avatar>
          <el-link class="header-after-link" >登录/注册</el-link>

          <el-link class="header-after-link">首页</el-link>
          <el-link class="header-after-link">今日推荐</el-link>
          <el-link class="header-after-link">精品分区</el-link>
          <el-link class="header-after-link">个人空间</el-link>

          <div class="header-input">
            <el-input v-model="input" placeholder="请输入内容" size="small" suffix-icon="el-icon-search" style="width: 200px;position: absolute;right: 50px;"></el-input>
          </div>
        </div>
      </el-header>

      <el-main style="padding:0px">
        <div class="main-modular">
          <mainModularEl1 
          v-bind:isMainModular1="isMainModular1">
          </mainModularEl1>
          <p>这是一段内容</p>
          <p>这是一段内容</p>
          <p>这是一段内容</p>
          <mainFooter></mainFooter>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mainModularEl1 from '@/components/mainModularEl-1'
import mainFooter from '@/components/mainFooter'
export default {
  components:{
    mainModularEl1,
    mainFooter,
  },

  data(){
    return{
      isTopSrcoll : true,
      user_pic:'',
      input:'',
      iswelcomeModular : true,
      isMainModular1 : true,
    }
  },

  methods:{
    scrollGet(){
      if(window.pageYOffset >= 200){
        this.isTopSrcoll = false
        this.isMainModular1 = true
      }else{
        this.isTopSrcoll = true
        this.isMainModular1 = false
      }

      if(window.pageYOffset > 500){
        this.iswelcomeModular = false
      }
      else{
        this.iswelcomeModular = true     
      }
    }
  },

  created() {
    window.addEventListener('scroll', this.scrollGet);
  },

}
</script>

<style lang="less" scope>
  *{
    margin: 0px;
    padding: 0px;
  }

  .el-header-before{
    background-color:transparent;
    line-height: 75px;
    width: 100%;
    position: fixed;
  }

@keyframes el-header-after-fade{
  from{
    background-color: transparent;
    height: 100px;
    box-shadow: none;
  }
  to{
    background-color: white;
    height: 60px;
    box-shadow: 0px 5px 5px azure;
  }
}

@keyframes  el-header-after-link-fade{
  from{ top:8px }
  to{ top: -5px }
}
.el-header-after{
    background-color:white;
    color: black;
    width: 100%;
    position: fixed;
    line-height: 60px;
    animation: el-header-after-fade 0.8s;
    box-shadow: 0px 5px 5px azure;

    overflow: hidden;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  .header-div > *{
    margin-left: 80px;
  }

  .header-input{
    display:inline;
    width: 70px;
  }

  .main-img-bg{
    height: 140%;
    width: 100%;
    margin: 0px;
    margin-top:-370px;
    filter: brightness(80%);

    position: absolute;
  }

  .header-before-link{
    height: 45px;

    color:white !important;
  }

  .header-after-link{
    position:absolute;
    height: 35px;
    top: -5px;
    // top:8px
    animation: el-header-after-link-fade 0.5s;
  }

  @keyframes welcome-modular-in{
    from{
      top:35%;
      opacity: 0.5;
    }
    to{
      top:30%;
      opacity: 1;
    }
  }

  .welcome-modular{
    position: absolute;
    color: white;

    line-height:60px;
    // text-align:right;

    top: 30%;
    left: 10%;

    animation: welcome-modular-in 0.8s;
  }

  .welcome-div-p-welcome{
    font-size: 40px;
  }

  .welcome-div-p-coffee{
    font-size: 25px;
  }

  .welcome-div-span-name{
    font-size: 50px;
  }

  .welcome-div-span-shop{
    font-size: 20px;
  }

  .welcome-div-button{
    border: 1px solid white;
    background-color: transparent;
    color: white;
    width: 200px;
    height: 50px;
  }

  .main-modular{
    margin-top:50% ;
  }
</style>